<template>
  <!-- 最多三层，更多可参考api -->
  <a-menu
    :selected-keys="selectedKeys"
    theme="dark"
    mode="inline"
    :inline-collapsed="$store.state.collapsed"
  >
    <template v-for="item in menuList" :key="item.name">
      <template v-if="!item.children || item.children.length==0">
        <a-menu-item :key="item.name" @click="toPage(item)">
          <i class="iconfont" :class="'icon-' + item.meta.icon" />
          <span>&nbsp;{{ item.meta.title }}</span>
        </a-menu-item>
      </template>
      <template v-else>
        <a-sub-menu :key="item.name">
          <template #title>
            <i class="iconfont" :class="'icon-' + item.meta.icon" /><span v-show="!$store.state.collapsed">&nbsp;{{ item.meta.title }}</span>
          </template>
          <template v-for="itemCld in item.children" :key="itemCld.name">
            <template v-if="!itemCld.children || itemCld.children.length==0">
              <a-menu-item :key="itemCld.name" @click="toPage(itemCld)">
                <i class="iconfont" :class="'icon-' + itemCld.meta.icon" />
                <span>&nbsp;{{ itemCld.meta.title }}</span>
              </a-menu-item>
            </template>
            <template v-else>
              <a-sub-menu v-if="itemCld.children && itemCld.children.length>0" :key="itemCld.name">
                <template #title>
                  <i class="iconfont" :class="'icon-' + itemCld.meta.icon" /><span v-show="!$store.state.collapsed">&nbsp;{{ itemCld.title }}</span>
                </template>
                <a-menu-item v-for="itemCld2 in item.children" :key="itemCld2.name" @click="toPage(itemCld2)">
                  <i class="iconfont" :class="'icon-' + itemCld2.meta.icon" />
                  <span>&nbsp;{{ itemCld2.meta.title }}</span>
                </a-menu-item>
              </a-sub-menu>
            </template>
          </template>
        </a-sub-menu>
      </template>
    </template>
  </a-menu>
</template>

<script>
export default {
  name: 'CMenu',
  props: {
    menus: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      menuList: [],
      collapsed: true,
      showNav: false,
      selectedKeys: ['0101'],
      loading: true
    }
  },
  created() {
    const _this = this
    _this.$bus.$on('do-switch-menus', (item) => {
      console.log('do-switch-menus', item)
      this.menuList = item.children
    })
    _this.$bus.$on('do-change-selected', (item) => {
      console.log('do-change-selected', item)
      this.selectedKeys = [item]
    })
  },
  methods: {
    toPage(item) {
      console.log(item)
      this.$router.push({
        path: item.path
      })
      this.$emit('goto-page', item)
    }
  }
}
</script>

<style scoped>

</style>
